<template>
  <div class="home-container">
    <h1 class="museum-title">博物馆主界面</h1>

    <div class="museum-content">
      <!-- 博物馆图片展示区 -->
      <div class="museum-image-container">
        <!-- 轮播图组件 -->
        <div v-if="hasImages" class="carousel-wrapper">
          <el-carousel :interval="4000" type="card" height="400px" indicator-position="outside">
            <el-carousel-item v-for="(image, index) in museumStore.museumInfo.images" :key="index">
              <img :src="image" alt="博物馆外观" class="carousel-image" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <div v-else class="no-image">
          <el-icon><Picture /></el-icon>
          <span>暂无图片</span>
        </div>

        <!-- 管理员上传图片按钮 -->
        <div v-if="userStore.isAdmin()" class="admin-controls">
          <el-upload
            class="upload-container"
            action=""
            :auto-upload="false"
            :show-file-list="false"
            :on-change="handleImageChange"
            multiple
          >
            <el-button type="primary" class="upload-button">
              <el-icon><Upload /></el-icon>
              上传轮播图片
            </el-button>
          </el-upload>

          <!-- 轮播图片管理 -->
          <div v-if="museumStore.museumInfo.images.length > 0" class="carousel-manager">
            <h3>轮播图片管理</h3>
            <div class="image-list">
              <div
                v-for="(image, index) in museumStore.museumInfo.images"
                :key="index"
                class="image-item"
              >
                <img :src="image" alt="轮播图片" class="thumbnail" />
                <div class="image-actions">
                  <el-button type="danger" size="small" @click="removeImage(index)">
                    <el-icon><Delete /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 博物馆信息展示区 -->
      <div class="museum-info">
        <div class="info-header">
          <h2>博物馆介绍</h2>
          <el-button
            v-if="userStore.isAdmin() && !isEditing"
            type="primary"
            @click="startEditing"
            class="edit-button"
          >
            <el-icon><Edit /></el-icon> 编辑信息
          </el-button>
        </div>

        <!-- 查看模式 -->
        <div v-if="!isEditing" class="info-content">
          <div class="info-item">
            <h3>
              <el-icon><Location /></el-icon> 位置
            </h3>
            <p>{{ museumStore.museumInfo.location }}</p>
          </div>
          <div class="info-item">
            <h3>
              <el-icon><House /></el-icon> 形态
            </h3>
            <p>{{ museumStore.museumInfo.appearance }}</p>
          </div>
          <div class="info-item">
            <h3>
              <el-icon><Clock /></el-icon> 历史背景
            </h3>
            <p>{{ museumStore.museumInfo.history }}</p>
          </div>
        </div>

        <!-- 编辑模式 (仅管理员可见) -->
        <div v-else class="edit-form">
          <el-form :model="editForm" label-position="top">
            <el-form-item label="位置">
              <el-input
                v-model="editForm.location"
                type="textarea"
                :rows="2"
                placeholder="请输入博物馆位置信息"
              />
            </el-form-item>
            <el-form-item label="形态">
              <el-input
                v-model="editForm.appearance"
                type="textarea"
                :rows="3"
                placeholder="请输入博物馆形态描述"
              />
            </el-form-item>
            <el-form-item label="历史背景">
              <el-input
                v-model="editForm.history"
                type="textarea"
                :rows="4"
                placeholder="请输入博物馆历史背景"
              />
            </el-form-item>
            <div class="form-buttons">
              <el-button @click="cancelEditing">取消</el-button>
              <el-button type="primary" @click="saveChanges">保存</el-button>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { useUserStore } from '../stores/user'
import { useMuseumStore, type MuseumInfo } from '../stores/museum'
import { ElMessage } from 'element-plus'
import { Picture, Upload, Edit, Location, House, Clock, Delete } from '@element-plus/icons-vue'

// 获取用户和博物馆信息存储
const userStore = useUserStore()
const museumStore = useMuseumStore()

// 计算属性：判断是否有图片可以显示
const hasImages = computed(() => museumStore.museumInfo.images.length > 0)

// 编辑状态控制
const isEditing = ref(false)

// 编辑表单数据
const editForm = reactive<MuseumInfo>({
  image: museumStore.museumInfo.image,
  images: museumStore.museumInfo.images,
  location: museumStore.museumInfo.location,
  appearance: museumStore.museumInfo.appearance,
  history: museumStore.museumInfo.history,
})

// 开始编辑
const startEditing = () => {
  // 复制当前数据到编辑表单
  editForm.location = museumStore.museumInfo.location
  editForm.appearance = museumStore.museumInfo.appearance
  editForm.history = museumStore.museumInfo.history
  isEditing.value = true
}

// 取消编辑
const cancelEditing = () => {
  isEditing.value = false
}

// 保存更改
const saveChanges = () => {
  museumStore.updateMuseumInfo({
    location: editForm.location,
    appearance: editForm.appearance,
    history: editForm.history,
  })
  isEditing.value = false
  ElMessage.success('博物馆信息已更新')
}

// 处理图片上传
const handleImageChange = (file: any) => {
  if (!file) return

  // 检查文件类型
  const isImage = file.raw.type.startsWith('image/')
  if (!isImage) {
    ElMessage.error('请上传图片文件!')
    return
  }


  // 将图片转换为base64
  const reader = new FileReader()
  reader.readAsDataURL(file.raw)
  reader.onload = () => {
    const base64 = reader.result as string
    // 添加到轮播图片数组
    museumStore.addCarouselImage(base64)
    // 如果是第一张图片，也设置为主图片
    if (museumStore.museumInfo.images.length === 1) {
      museumStore.updateImage(base64)
    }
    ElMessage.success('图片上传成功')
  }
}

// 删除轮播图片
const removeImage = (index: number) => {
  museumStore.removeCarouselImage(index)
  ElMessage.success('图片已删除')
}
</script>

<style lang="scss" scoped>
.home-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px); /* 减去导航栏的高度 */
  width: 100%;
  padding: 20px;
  overflow-y: auto;
  background-color: #f8f5f0;
  position: relative;

  /* 高级纹理背景 */
  background-image:
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%238b5a2b' fill-opacity='0.08' fill-rule='evenodd'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%238b5a2b' fill-opacity='0.05'%3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

  /* 装饰性边框元素 */
  &::before, &::after {
    content: "";
    position: absolute;
    width: 200px;
    height: 200px;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='none' stroke='%238b5a2b' stroke-width='1' d='M10,50 C10,30 30,10 50,10 C70,10 90,30 90,50 C90,70 70,90 50,90 C30,90 10,70 10,50 Z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.15;
    z-index: 0;
  }

  &::before {
    top: 20px;
    left: 20px;
  }

  &::after {
    bottom: 20px;
    right: 20px;
    transform: rotate(180deg);
  }
}

.museum-title {
  color: #8b5a2b;
  font-size: 28px;
  margin-bottom: 20px;
  text-align: center;
  font-family: 'SimSun', serif;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.museum-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;

  @media (min-width: 768px) {
    flex-direction: row;
    align-items: flex-start;
  }
}

.museum-image-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8e0d5;
}

.image-wrapper {
  width: 100%;
  height: 300px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #e8e0d5;

  img.museum-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.02);
    }
  }
}

.no-image {
  width: 100%;
  height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #f9f6f2;
  border-radius: 4px;
  border: 1px dashed #d3c6b0;
  color: #a89070;

  .el-icon {
    font-size: 48px;
    margin-bottom: 10px;
  }
}

.carousel-wrapper {
  width: 100%;
  margin-bottom: 15px;

  .el-carousel {
    height: 100%;

    .el-carousel__container {
      height: 400px; // 增加高度
    }

    // 增加卡片样式的宽度
    :deep(.el-carousel__item) {
      &.is-active {
        transform: translateX(0) scale(1);
        z-index: 2;
        width: 80% !important; // 增加活动卡片的宽度
        margin: 0 auto;
      }
    }
  }
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: contain; // 保持图片比例
  border-radius: 4px;
  background-color: #f9f6f2; // 添加背景色以便于区分图片边界
}

.carousel-manager {
  width: 100%;
  margin-top: 20px;

  h3 {
    color: #8b5a2b;
    font-size: 18px;
    margin-bottom: 10px;
    font-family: 'SimSun', serif;
    text-align: center;
  }

  .image-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;

    .image-item {
      position: relative;
      width: 80px;
      height: 80px;
      border-radius: 4px;
      overflow: hidden;
      border: 1px solid #e8e0d5;

      .thumbnail {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .image-actions {
        position: absolute;
        top: 0;
        right: 0;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 0 0 0 4px;

        .el-button {
          padding: 2px;
          min-height: auto;
        }
      }
    }
  }
}

.admin-controls {
  margin-top: 15px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;

  .upload-button {
    background-color: #8b5a2b;
    border-color: #8b5a2b;

    &:hover {
      background-color: #6d4522;
      border-color: #6d4522;
    }
  }
}

.museum-info {
  flex: 1;
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: 1px solid #e8e0d5;
}

.info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  border-bottom: 2px solid #f0e6d9;
  padding-bottom: 10px;

  h2 {
    color: #8b5a2b;
    font-size: 22px;
    margin: 0;
    font-family: 'SimSun', serif;
  }

  .edit-button {
    background-color: #8b5a2b;
    border-color: #8b5a2b;

    &:hover {
      background-color: #6d4522;
      border-color: #6d4522;
    }
  }
}

.info-content {
  .info-item {
    margin-bottom: 20px;

    h3 {
      color: #8b5a2b;
      font-size: 18px;
      margin-bottom: 8px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-family: 'SimSun', serif;
    }

    p {
      color: #333;
      line-height: 1.6;
      margin: 0;
      text-align: justify;
      padding-left: 26px;
    }
  }
}

.edit-form {
  .el-form-item {
    margin-bottom: 15px;
  }

  .form-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
  }
}
</style>
